<template>
    <div class='in-item'>
        <div class="box d-flex flex-column justify-center align-center" :class="iniitem.checkState ? 'boxIn' : ''">
            <span>+{{ iniitem.energy }}</span>
            <img  v-if="iniitem.checkState" src="@/assets/sign_energy.png">
            <img v-else :src="Icon">

        </div>
        <span class="in">{{ ISIn }}</span>
    </div>
</template>

<script lang='ts' setup>
import { computed } from "vue";
import Icon from "@/assets/cir.png";
import { InIitem } from "./script/InItem";
import i18n from "@/locals";
const prop = defineProps({
    iniitem: {
        type: InIitem,
        default: {
            energy: 0,
            day: 'day',
            checkState: false,
        }
    }
});
const ISIn = computed(() => {
    if (prop.iniitem.checkState) {
        return i18n.global.t('message.Day.d');
    }
    return `${prop.iniitem.day}`;
});
</script>

<style lang='less' scoped>
.in-item {
    text-align: center;
    width: 70px;

    .box {
        height: 90px;
        border-radius: 8px;
        border: 1px solid #343A41;

        span {
            font-size: 14px;
            font-family: PingFangSC, PingFang SC;
            font-weight: 600;
            color: var(--color);
            line-height: 20px;
            margin-bottom: 8px;
        }

        img {
            width: 32px;
            -webkit-user-drag: none;
        }
    }

    .boxIn {
        background: #21252C;

        span {
            color: var(--main);
        }
    }

    .in {
        font-size: 12px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        color: #B1B6C6;
        line-height: 17px;
    }
}
.imgopa{
    opacity: 0.6;
}
</style>